<template>
  <div class="login">
      <img class="login-bg" src="../../static/images/login-bg.jpg" width="100%" height="100%">
      <div class="login-content">
          <div class="login-cont">
              <p class="logo"><img src="../../static/images/logo.png"></p>
              <div class="login-form">
                  <div class="login-form-shadow"></div>
                  <div class="login-form-cont">
                      <ul id="login-form">
                          <li class="login-user">
                              <i class="icon iconfont icon-yonghu1"></i>
                              <input ref="loginUser" class="login-user-ipt" v-model="userMsg.User" type="text" placeholder="用户名">
                          </li>
                          <li class="login-user">
                              <i class="icon iconfont icon-mima"></i>
                              <input ref="loginPsd" class="login-user-ipt" v-model="userMsg.Psd" type="password" placeholder="密码" @keyup.enter="goIndex">
                          </li>
                          <li class="login-btn" @click="goIndex">登   录</li>
                      </ul>
                  </div>
                  <p class="login-foot">内蒙古豪德天沐科技有限公司   荣誉出品</p>
              </div>
          </div>
      </div>
      <!--验证码-->
      <verification ref="verification" v-if="show" :message="userMsg"></verification>
  </div>
</template>

<script>
import verification from "../components/verification";
import axios from "axios";
export default {
  name: "login",
  components:{
    verification,
  },
  mounted: function() {
    $(".login-content").height($(window).height());
    //在本地存储一个变量记录用户输入错误次数
    let storageNum = localStorage.getItem("num");
    if(!storageNum){
      localStorage.setItem("num", 0);
    }
  },
  data() {
    return {
      userMsg:{
        User: '',
        Psd: '',
      },
      show: false
    };
  },
  methods: {
    //登录
    goIndex(ev){
      if(this.userMsg.User==''){
        layer.msg("请输入用户名");
        this.$refs.loginUser.focus();
        return false;
      }
      if(this.userMsg.Psd==''){
        layer.msg("请输入密码");
        this.$refs.loginPsd.focus();
        return false;
      };
      if(localStorage.getItem("num")>2){//判断用户名或密码输入错误3次以上，则下次登录需要输入验证码
        let that = this;
        that.show = true;//需要先显示下面才可以取到$el
        this.$nextTick(() => {
          layer.open({
            type: 1,
            shadeClose: true,
            title: '请输入验证码',
            area: ['600px', '180px'], //宽高
            content: $(this.$refs.verification.$el),
            end: function() {
              that.show=false;
            }
          });
        });
      }else{//判断用户前3次输入正确的话，则不需要输入验证码直接登录
        //请求后台接口,传递用户名密码
        axios.post(loginURL,{
          loginName: this.userMsg.User,
          password: this.userMsg.Psd
        })
        .then(response=>{
          let d = response.data;
          if(d.resultCode==0){//判断输入密码是否正确-1错误0正确
            appDB.set(
              "userInfo",
              $.extend(d.record, { psd: this.userMsg.Psd })
            );
            //2小时存到本地
            let timestamp=7200000;
            let timestamp1=new Date().getTime();
            appDB.set("time",timestamp);
            appDB.set("timeOut",timestamp1);
            this.$router.push("/index");
          }else{//如果用户名输入错误，则记录错误次数
            layer.msg("用户名或密码错误！")
            let count = localStorage.getItem("num")
            count++;
            localStorage.setItem("num", count);
          }
        })
        .catch(error => {
          layer.msg("网络错误")
        });
      };
    },
  }
};
</script>

<style scoped>
.login-foot{
    width: 100%;
    float: left;
    color: #fff;
    position: fixed;
    bottom: 30px;
    left: 0;
    text-align: center;
}
.login {
  width: 100%;
  float: left;
}
.login-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.login-content {
  width: 100%;
  display: flex;
  position: relative;
  align-items: center;
  z-index: 2;
}
.logo {
  width: 100%;
  text-align: center;
  margin-bottom: 120px;
}
.login-cont {
  width: 100%;
  float: left;
  position: relative;
  top: -120px;
}
.login-form {
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.login-form-shadow {
  width: 100%;
  height: 120px;
  float: left;
  background: #fff;
  opacity: 0.3;
  border-radius: 6px;
  border: 1px solid #ffffff;
  box-shadow: 0 0 3px #011a32;
}
.login-form-cont {
  width: 100%;
  padding: 0 4%;
  float: left;
  position: relative;
  top: -83px;
}
#login-form {
  display: flex;
  justify-content: space-between;
}
.login-user {
  width: 31%;
  padding: 0 2%;
  background: #fff;
  border-radius: 5px;
  font-size: 16px;
  box-shadow: 0 0 5px #575555 inset;
}
.login-psd {
  width: 31%;
  padding: 0 2%;
  background: #fff;
  border-radius: 5px;
  font-size: 16px;
}
.login-btn {
  width: 20%;
  line-height: 44px;
  background: #59c532;
  text-align: center;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
}
.icon {
  font-size: 30px;
  float: left;
  margin-right: 5px;
}
.login-user-ipt {
  width: 84%;
  height: 40px;
  line-height: 40px;
  margin-top: 2px;
}
</style>


